<template>
  <div class="voting_main">
    <head-top head-title="业主投票" goBack="true"></head-top>
    <p v-if="pName === undefined || (pName.phone === '0' || pName.phone === '') || pName.name === ''"
       style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">
      请先编辑资料</p>
    <div class="no_info_div" v-if="v_status==2">
      <p>未在<span>{{vallageTitle}}</span>找到您的业主信息</p>
      <p>请进行<span>业主变更</span>或<span>切换到您的小区</span></p>
      <button @click="goIdent">前往业主变更</button>
    </div>
    <p v-if="v_status==4" style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">投票未开启或投票已下架</p>
    <p v-if="v_status==5" style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">您未绑定手机和真实姓名</p>
    <p v-if="v_status==6" style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">系统已升级，请去业主投票小程序操作</p>
    <!--投票列表start-->
    <div class="vote_style" v-if="v_status == 1" v-for="(all,indexa) in listAll" :key="indexa">
      <!--选举投票-->
      <div class="style_box" v-if="indexa==='can' && all.length!==0">
        <div class="style_title">
          <span>选举(其它)投票</span>
        </div>
        <div class="voting_list" v-for="(can,index) in all" :key="'a'+index">
          <div class="introduces">
            <div class="pcontent_word">
              <div class="word_top">
                <p>{{can.title}}</p>
                <span>截止时间：{{can.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p v-html="can.content"></p>
                <span @click="toVoteDetail(can.article_id,can.type)">查看详细内容</span>
              </div>
              <!--已投票图片提示-->
              <img v-if="can.p_status === 1" @click="$router.push('/home/VillageDetail/'+can.article_id+'/'+can.type)"
                   src="./images/alreadycast@2x.png" alt="">
              <!--已送票图片提示-->
              <img v-if="can.p_status === 2" @click="$router.push('/home/VillageDetail/'+can.article_id+'/'+can.type)"
                   src="./images/alreadyService@2x.png" alt="">
              <!--已回收图片-->
              <img v-if="can.p_status === 3" @click="$router.push('/home/VillageDetail/'+can.article_id+'/'+can.type)"
                   src="./images/Recycled@2x.png" alt="">
            </div>
          </div>
          <div class="joinbtn" v-if="can.p_status === 0">
            <button @click="$router.push('/home/voting/'+can.vote_id+'/'+can.can_type)">
              <span>立即参与</span>
            </button>
          </div>
          <div class="joinbtn2" v-if="can.p_status === 1">
            <button @click="goSatisRoot(can.url)">
              <span>查看票根</span>
            </button>
          </div>
        </div>
      </div>
      <!--事务投票-->
      <div class="style_box" v-if="indexa==='sup' && all.length!==0">
        <div class="style_title">
          <span>事务投票</span>
        </div>
        <div class="voting_list" v-for="(sup,index2) in all" :key="'b'+index2">
          <div class="introduces">
            <div class="pcontent_word">
              <div class="word_top">
                <p>{{sup.title}}</p>
                <span>截止时间：{{sup.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p v-html="sup.content"></p>
                <span @click="toVoteDetail(sup.article_id, sup.type)">查看详细内容</span>
              </div>
              <!--已投票图片-->
              <img v-if="sup.p_status === 1" @click="$router.push('/home/VillageDetail/'+sup.article_id+'/'+sup.type)"
                   src="./images/alreadycast@2x.png" alt="">
              <!--已送票图片-->
              <img v-if="sup.p_status === 2" @click="$router.push('/home/VillageDetail/'+sup.article_id+'/'+sup.type)"
                   src="./images/alreadyService@2x.png" alt="">
              <!--已回收图片-->
              <img v-if="sup.p_status === 3" @click="$router.push('/home/VillageDetail/'+sup.article_id+'/'+sup.type)"
                   src="./images/Recycled@2x.png" alt="">
            </div>
          </div>
          <div class="joinbtn" v-if="sup.p_status === 0">
            <button @click="$router.push('/home/Vote/'+sup.vote_id)">
              <span>立即参与</span>
            </button>
          </div>
          <div class="joinbtn2" v-if="sup.p_status === 1">
            <button @click="goSatisRoot(sup.url)">
              <span>查看票根</span>
            </button>
          </div>
        </div>
      </div>
      <!--满意度投票-->
      <div class="style_box" v-if="indexa==='sat' && all.length!==0">
        <div class="style_title">
          <span>满意度调查</span>
        </div>
        <div class="voting_list" v-for="(sat,index3) in all" :key="'c'+index3">
          <div class="introduces">
            <div class="pcontent_word">
              <div class="word_top">
                <p>{{sat.title}}</p>
                <span>截止时间：{{sat.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p v-html="sat.content"></p>
                <span v-if="sat.type === 'vote'" @click="toSatDetail(sat.satisId)">查看详细内容</span>
                <span v-if="sat.type === 'voting'" @click="toVoteDetail(sat.satisId, sat.type)">查看详细内容</span>
              </div>
              <!--已投票图片-->
              <img v-if="sat.p_status === 1" @click="$router.push('/home/TakeInDetail/'+sat.satisId)"
                   src="./images/alreadycast@2x.png" alt="">
              <!--已送票图片-->
              <img v-if="sat.p_status === 2" @click="$router.push('/home/TakeInDetail/'+sat.satisId)"
                   src="./images/alreadyService@2x.png" alt="">
              <!--已回收图片-->
              <img v-if="sat.p_status === 3" @click="$router.push('/home/TakeInDetail/'+sat.satisId)"
                   src="./images/Recycled@2x.png" alt="">
            </div>
          </div>
          <div class="joinbtn" v-if="sat.p_status === 0">
            <!--选项满意度-->
            <button v-if="sat.score_type===1" @click="$router.push('/home/TakeIn/'+sat.satisId)">
              <span>立即参与</span>
            </button>
            <!--填写满意度-->
            <button v-if="sat.score_type===2" @click="$router.push('/home/SatisForm/'+sat.satisId)">
              <span>立即参与</span>
            </button>
          </div>
          <div class="joinbtn2" v-if="sat.p_status === 1">
            <button @click="goSatisRoot(sat.url)">
              <span>查看票根</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!--投票列表end-->
  </div>
</template>
<style lang="scss" scoped>
  .voting_main {
    width: 100%;
    padding-top: 40px;
    background: white;
    .no_info_div {
      padding: 200px 10px 0px 10px;
      text-align: center;
      font-size: 16px;
      p {
        line-height: 40px;
        span {
          color: #ff0000;
        }
      }
      button {
        width: 60%;
        background-color: #047bda;
        border-radius: 50px;
        font-size: 15px;
        color: #FFFFFF;
        padding: 10px 0 10px 0;
        border: none;
        outline: none;
      }
    }

    .vote_style {
      width: 100%;
      .style_box {
        .style_title {
          width: 100%;
          height: 40px;
          background: #f2f2f2;
          span {
            font-size: 14px;
            color: #656b79;
            line-height: 40px;
            margin-left: 10px;
          }
        }
        .voting_list {
          padding: 10px;
          border-bottom: 1px solid #f2f2f2;
          .introduces {
            width: 100%;
            height: 70px;
            .pcontent_word {
              float: left;
              width: 100%;
              margin-left: 5px;
              position: relative;
              .word_top {
                margin-top: 10px;
                height: 22px;
                p {
                  font-size: 15px;
                  float: left;
                  width: 168px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  float: right;
                  font-size: 10px;
                  color: #666;
                  margin-right: 6px;
                }
              }
              .word_bottom {
                height: 22px;
                line-height: 22px;
                p {
                  font-size: 13px;
                  float: left;
                  color: #666666;
                  width: 180px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  float: right;
                  font-size: 12px;
                  color: #0078de;
                  margin-right: 6px;
                }
              }
              img {
                width: 90px;
                position: absolute;
                right: 10px;
                top: 0;
              }
            }
          }
          .joinbtn {
            text-align: center;
            button {
              width: 100%;
              border: 1px solid #0078de;
              background: #fff;
              outline: none;
              margin-top: 10px;
              span {
                line-height: 40px;
                font-size: 15px;
                color: #0078de;
              }
            }
          }
          .joinbtn2 {
            text-align: center;
            button {
              width: 100%;
              background: #0078de;
              outline: none;
              margin-top: 10px;
              span {
                line-height: 40px;
                font-size: 15px;
                color: #fff;
              }
            }
          }
        }
      }
    }

  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import commonUrl from '../../common/js/commonUrl.js'
  import {
    loadVillageId,
    loadUserId,
    loadPhoneName,
    loadTitle
  } from '../../common/js/cache.js'
  import qs from 'qs'
  import { Toast } from 'mint-ui'

  export default {
    name: 'VotingList',
    data () {
      return {
        listAll: [],
        v_status: {
          type: Number
        },
        pName: loadPhoneName(),
        vallageTitle: loadTitle() // 小区名
      }
    },
    created () {
      // console.log(this.pName)
      if (this.pName === undefined) {
        Toast({
          message: '请先业主认证',
          position: 'middle',
          duration: 1500
        })
        this.$router.push('/EditData1')
      } else {
        if ((loadPhoneName().phone === '0' || loadPhoneName().phone === '') || loadPhoneName().name === '') {
          Toast({
            message: '请先业主认证',
            position: 'middle',
            duration: 1500
          })
          this.$router.push('/EditData1')
        } else {
          this.getListVoting()
        }
      }
    },
    methods: {
      // 选举,事务,满意度详情
      toVoteDetail (id, type) {
        this.$router.push('/home/VillageDetail/' + id + '/' + type)
      },
      // 满意度详情（type='vote'）
      toSatDetail (id) {
        this.$router.push('/home/TakeInDetail/' + id)
      },
      getListVoting () {
        const url = `${commonUrl.apihost}index.php/home/supplement/Inspect`
        const data = {
          userId: loadUserId(),
          phone: loadPhoneName().phone,
          realName: loadPhoneName().name,
          areasId: loadVillageId()
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            this.v_status = res.data.data.status
            if (this.v_status === 1) {
              this.listAll = res.data.data.data
              // console.log(this.listAll)
            }
          }
        })
      },
      // 查看票根
      goSatisRoot (url) {
        // console.log(url)
        this.$router.push({name: 'TicketRoot', params: {url: url}})
      },
      // 前往业主变更
      goIdent() {
        this.$router.push('/my/Ident')
      }
    },
    components: {
      headTop
    }
  }
</script>
